<template>
	<view class="content">
		<view class="qiun-bg-white qiun-title-bar qiun-common-mt" >
									  <view class="qiun-title-dot-light">副控中心</view>
		</view>
		<view class="wrap">
			<view class="item" v-for="item in list">
				<view>{{item.name}}</view>
				<view>{{item.value}}{{item.dw}}</view>
				<view v-if="item.bz" style="color: #07C160;">{{item.bz}}{{item.dw}}</view>
			</view>
			<view v-for="item in 3-list.length%3" style="width: 30%;"></view>
		</view>
		<view style="margin-top: 80rpx;" class="qiun-bg-white qiun-title-bar qiun-common-mt" >
									  <view class="qiun-title-dot-light">大渡口</view>
		</view>
		<view class="wrap">
			<view class="item" v-for="item in list2">
				<view>{{item.name}}</view>
				<view>{{item.value}}{{item.dw}}</view>
                <view v-if="item.bz" style="color: #07C160;">{{item.bz}}{{item.dw}}</view>
			</view>
			<view v-for="item in 3-list2.length%3" style="width: 30%;"></view>
		</view>
	</view>
</template>

<script>
	import API from '@/common/api.js';
    import util from '@/common/util.js';
	export default {
		data() {
			return {
				pzhAuthorization:uni.getStorageSync('pzhAuthorization'),
				timer:null,
				list:[
					{name:'有害物',dw:'%',value:0,bz:'70~140'},
					{name:'挥发酚',dw:'mg/L',value:0,bz:'≤0.005'},
					{name:'氨氮',dw:'mg/L',value:0,bz:'≤1.0'},
					{name:'铜离子',dw:'mg/L',value:0,bz:'≤1.0'},
					{name:'锰离子',dw:'mg/L',value:0,bz:'≤0.1'},
					{name:'铬离子',dw:'mg/L',value:0,bz:'≤0.05'},
					{name:'浊度',dw:'NTU',value:0,bz:''},
					{name:'PH',dw:'',value:0,bz:'6~9'},
					{name:'COD',dw:'mg/L',value:0,bz:'≤20'},
					],
				list2:[
					{name:'浊度',dw:'NTU',value:0,bz:''},
					{name:'PH',dw:'',value:0,bz:'6~9'},
					{name:'COD',dw:'mg/L',value:0,bz:'≤20'},
				],
			}
		},
		onLoad(options){
		   this.socket()
		},
		onUnload() {
			clearInterval(this.timer)
		    uni.closeSocket()
		},
		methods:{
          socket(){
              uni.connectSocket({
                url:'wss://125.66.234.97:8443/panzhihua/WebSocketTarget?pzhAuthorization='+this.pzhAuthorization
              });
              uni.onSocketOpen( (res)=> {
                console.log('WebSocket连接已打开！');
                uni.sendSocketMessage({data:"getTargetValuesByType(副控中心水质监测)"} )
                uni.sendSocketMessage({data:"getTargetValuesByType(大渡口水质监测)"} )
                this.timer=setInterval(()=>{
                     uni.sendSocketMessage({data:"getTargetValuesByType(副控中心水质监测)"} )
                     uni.sendSocketMessage({data:"getTargetValuesByType(大渡口水质监测)"} )
                 },5000)
              });
            
              uni.onSocketMessage( (res)=> {
                  let obj=JSON.parse(res.data)
                  if(obj.functionCode!='getTargetValuesByType'){
                      return
                  }
                  // console.log(obj)
				  	obj.datas.forEach((item,index)=>{
				  		if(item.sbdz=='副控中心'){ 
							this.list.forEach((it,ind)=>{
								if(it.name==item.zwmc){
									this.list[ind].value=this.changeNum(item.value) 
									// let names=['锰离子','铜离子','铬离子','锰离子']
									// if(this.list[ind].name=='挥发酚'){
									// 	this.list[ind].value=this.changeNum(0.001* (Math.round(Math.random()*10)+95)/100  ) 
									// }
									
									// if(this.list[ind].name=='氨氮'){
									// 	this.list[ind].value=this.changeNum(0.05* (Math.round(Math.random()*10)+95)/100  ) 
									// }
									// 	if(this.list[ind].name=='COD'){
									// 	this.list[ind].value=this.changeNum(1.38* (Math.round(Math.random()*10)+95)/100  ) 
									// }
									
									// if(names.indexOf(this.list[ind].name) >-1){
									// 	this.list[ind].value=this.changeNum(0.01* (Math.round(Math.random()*10)+95)/100  ) 
									// }
									// if(this.list[ind].name=='PH'){
									// 	this.list[ind].value=this.changeNum( 7.4 + Math.round(Math.random()*10)/100)  
									// }
								}
							})
				  		}else if(item.sbdz=='大渡口'){
                            this.list2.forEach((it,ind)=>{
                            	if(it.name==item.zwmc){
                            		this.list2[ind].value=this.changeNum(item.value) 
                            		// let names=['锰离子','铜离子','铬离子','锰离子']
                            		// if(this.list2[ind].name=='挥发酚'){
                            		// 	this.list2[ind].value=this.changeNum(0.001* (Math.round(Math.random()*10)+95)/100  ) 
                            		// }
                            		
                            		// if(this.list2[ind].name=='氨氮'){
                            		// 	this.list2[ind].value=this.changeNum(0.05* (Math.round(Math.random()*10)+95)/100  ) 
                            		// }
                            		// 	if(this.list2[ind].name=='COD'){
                            		// 	this.list2[ind].value=this.changeNum(1.38* (Math.round(Math.random()*10)+95)/100  ) 
                            		// }
                            		
                            		// if(names.indexOf(this.list2[ind].name) >-1){
                            		// 	this.list2[ind].value=this.changeNum(0.01* (Math.round(Math.random()*10)+95)/100  ) 
                            		// }
                            		// if(this.list2[ind].name=='PH'){
                            		// 	this.list2[ind].value=this.changeNum( 7.4 + Math.round(Math.random()*10)/100)  
                            		// }
                            	}
                            })
						}
				  	})
              });
          },
		  changeNum(num){
		  	return Math.abs(Number(Math.floor(Number(num) * 1000) / 1000).toFixed(3)) 
		  }
		}
	}
</script>

<style lang="less" scoped>
	.content{
        background: linear-gradient(135deg, #a7cee0 50%, #d0dea7);
        height: calc(100vh - 10rpx);
        padding-top: 10rpx;
		.wrap{
			display: flex;
			flex-wrap: wrap;
			text-align: center;
			justify-content: space-between;
			padding: 0 20rpx;
			.item{
                
                background-color: rgba(255, 255, 255,0.8);
                box-shadow: rgba(0, 0, 0, 0.1) -2px -2px 4px 0px, rgba(74, 125, 221,0.25) 2px 2px 4px 0px;
				// border: 2rpx solid #dcdfe6;
				overflow: hidden;
				border-radius: 15rpx;
				width: 30%;
				margin-top: 30rpx;
				view:first-child{
					background: #01B7FC;
					color: white;
				}
			}
		}
		.qiun-common-mt{}
			// .qiun-bg-white{background:#FFFFFF;}
			.qiun-title-bar{width:96%; padding:0 2%; flex-wrap:nowrap;}
			.qiun-title-dot-light{border-left: 10upx solid #0ea391; padding-left: 10upx; font-size: 32upx;color: #333333}
		
	}
</style>
